<template>
  <div id="loginLogs">
      <div class="loginLogs-content">
          <h3 class="customManage_title">筛选区</h3>
            <ul class="infoList_filter">
                <li class="infoList_filter_item">
                    <span class="filterSpan">账号类型</span>
                    <el-select
                    class="selectBox"
                    v-model="filterData.areaResource"
                    placeholder="请选择"
                    >
                    <el-option
                        v-for="item in filterData.areaOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                    </el-select>
                    <!-- <span class="filterSpan" style="margin-left: 40px;">开通人员</span>
                    <el-select
                    class="selectBox"
                    v-model="filterData.areaResource"
                    placeholder="请选择"
                    >
                    <el-option
                        v-for="item in filterData.areaOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                    </el-select> -->
                    <el-input 
                    class="inputBox"
                    placeholder="支持搜索客户名称/客户ID">
                    </el-input>
                </li>
                <li class="infoList_filter_item">
                    <span class="filterSpan">登录时间</span>
                    <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="--"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                    <!-- <span class="filterSpan" style="margin-left: 40px">客户从属</span>
                    <el-select
                    class="selectBox"
                    v-model="filterData.areaResource"
                    placeholder="请选择"
                    >
                    <el-option
                        v-for="item in filterData.areaOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                    </el-select> -->
                </li>
                <li class="infoList_filter_btn">
                    <el-button type="primary">重设</el-button>
                    <!-- <el-button type="success">保存</el-button> -->
                    <el-button type="danger">查询</el-button>
                </li>
            </ul>
            <h3 class="customManage_title">内容区</h3>
            <!-- <div class="createBrief">
                <el-button>新建简报</el-button>
                <el-button>上传报告</el-button>
            </div> -->
            <div class="groupBtns">
                <el-button icon="el-icon-delete" class="deleteBtn">删除</el-button>
                <el-button icon="el-icon-delete" class="clearAll">清空所有记录</el-button>
            </div>
            <div class="tableBox">
                <el-table
                    :data="tableData"
                    border
                    class="sentimentTable"
                    style="width: 100%">
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    prop="cusName"
                    label="账号名称">
                    </el-table-column>
                    <el-table-column
                    prop="loginName"
                    label="登录用户名">
                    </el-table-column>
                    <el-table-column
                    prop="accoutType"
                    label="账号类型">
                    </el-table-column>
                    <el-table-column
                    prop="loginIP"
                    label="登录IP">
                    </el-table-column>
                    <el-table-column
                    prop="loginTime"
                    label="登录时间">
                    </el-table-column>   
                    <el-table-column
                    width="150px"
                    label="操作">
                    <template slot-scope>
                        <span class="tableBtn delete">删除</span>
                    </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    background
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="page.pageSize"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next"
                    :total="page.total"
                >
                </el-pagination>
            </div>
      </div>
  </div>
</template>

<script>
import '../assets/css/loginLogs.css'
export default {
    data(){
        return{
            filterData: {
                defineDate: '',
                timeDate: "0", // 时间范围
                pubMood: "0", // 舆论情绪
                sortRule: "0", // 排序规则
                similarArticle: "0", // 相似文章
                areaResourceType: "0", // 来源区域
                areaResource: "0",
                areaOption: [
                { value: "0", label: "全部" },
                { value: "1", label: "微信" },
                { value: "2", label: "微博" }
                ],
                typeResource: "0" // 来源类型
            },
            value1: '',
            tableData: [
                {
                    id: '23434',
                    pageNo: '1',
                    cusName: 'zhangsan',
                    loginName: 'a123',
                    accoutType: '前台账号',
                    loginIP: '10.10.10.11',
                    loginTime: '2016/06/01 09:00'
                }
            ],
            page: {
                filterText: "",
                currentPage: 1,
                pageSize: [10, 20, 30, 50, 100],
                size: 10,
                total: 100
            }
        }
    }
}
</script>
